<template>
    <div class="order" :style="styleDiv">
    	<div class="top">
    		<ul class="clearfix" :style="styleUl">
				<li :style="styleli" :class="{current: flag == index}" @click="flag=index" v-for="(item,index) in type">
					<span>{{item}}</span>
				</li>
    		</ul>
    	</div>
    	<ul class="orderAggregate">
    		<li @click="$router.push('/jobDetail')" v-for="(item,index) in orders">
    			<div class="up">
    				<div class="left">
    					<img :src="item.img" alt="">
    				</div>
    				<div class="right clearfix">
    					<div class="head clearfix"><h2>{{item.title}}</h2><i class="iconfont icon-baozhang"></i><span>{{item.price}}<em>&nbsp;元/天</em></span><br><span v-show='dandan' class="dandan">{{item.dan}}<em>&nbsp;元/单</em></span></div>
    					<div class="center clearfix">
                <p>诚信值: <span>{{item.integrity}}</span></p>
                <p>{{item.data}} | {{item.distance}}km</p>
              </div>
              <div class="right_abso"><img src="/static/images/man.png" alt=""></div>
    				</div>
    			</div>
    			<div class="down clearfix">
    				<div class="downLeft">{{item.site}} </div><span>还缺 {{item.personNum}}</span>
           <strong class="strong">抢单</strong>
    			</div>
    		</li>
    	</ul>
    </div>
</template>

<script>
export default {
    name: 'order',
    data(){
    	return{
    		type:["家政装修","心理咨询","校园兼职","活动主持","代办跑腿","教育培训","搬家速运"],
    		styleDiv:{ height: '100%'},
    		styleUl: { width: '400px'},
    		styleli: { width: '400px'},
    		flag:0,
        // dandan:true,
    		orders:[
    			{
    				img:"./static/images/a.jpg",
    				distance:13.5,
    				title:"资深电工",
    				data:"02.17-02.18",
    				zeren:true,
    				chengxin:true,
            personNum:8,
    				price:150,
            integrity:36.5,
            dan:2,
    				site:'海淀区善缘街1号立方体大厦108号521',

    			},
    			{
            img:"./static/images/a.jpg",
            distance:13.5,
            title:"资深电工",
            data:"02.17-02.18",
            zeren:true,
            chengxin:true,
            personNum:8,
            price:150,
            integrity:36.5,
            site:'海淀区善缘街1号立方体大厦108号521'
          },
    			{
            img:"./static/images/a.jpg",
            distance:13.5,
            title:"资深电工",
            data:"02.17-02.18",
            zeren:true,
            chengxin:true,
            personNum:8,
            price:150,
            integrity:36.5,
            site:'海淀区善缘街1号立方体大厦108号521'
          },
    		]
    	}
    },
    methods:{
    	typeScroll(){
    		let pageWidth = window.innerWidth;
    		let pageHeight = window.innerHeight;
    		let typeNumbers = this.type.length;
    		let each_li = pageWidth / 4;
    		this.styleUl.width = typeNumbers*each_li+"px";
    		this.styleli.width = each_li+"px";
    		this.styleDiv.height = pageHeight+"px";
    	}
    },
    mounted(){
    	this.typeScroll()
    	var _this = this;
    	window.onresize = function(){
    		_this.typeScroll()
    	};

    },
}
</script>

<style scoped>
.order{
	background-color: #F7F7F7;
}
.top{
	height: 40px;
	background-color: #fff;
	overflow-x:auto;
}
.top ul{
	height: 40px;
}
.top ul li{
	float: left;
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.top ul li span{
	height: 39px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	border-bottom: 1px solid #fff;
	display: inline-block;
}
.top ul li.current span{
	color: #ffb452;
	border-bottom: 1px solid #ffb452;
}
.orderAggregate li{
	background-color: #fff;
	padding: 12px 16px;
	padding-bottom: 0;
	margin-top: .6rem;
}
.up{
	border-bottom: 1px solid #F1F1F1;
	padding-left: 60px;
	padding-bottom: 8%;
	position: relative;
}
.left{
	position: absolute;
	left: 0;
	top: 0;
}
.left img{
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 4px;
}
.head,.center{
	height: 20px;
	line-height: 20px;
	margin-bottom: 10px;
}
.head{margin-bottom: 0;}
.head h2{
	font-size: 16px;
	font-weight: normal;
	float: left;
}
.head i.icon-baozhang{
	font-size: 19px;
	color: #ffbe4d;
	float: left;
	margin-left: 10px;
}
.head span{
  font-size: 16px;
  color: #E91717;
	float: right;
}
.center p{
	color: #999;
	font-size: 14px;
}
.center p span{
	color: #FFA811;
}
.center p:first-child {padding:6px 0;}
.center p:last-child {height:36px;}
 strong.strong{
  width: 50px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  color: #FFA811;
  border:1px solid #FFA811;
  border-radius: 5em;
  float: right;
  font-weight: 200;
      position: relative;
    top: 8px;
}
.center i{
	float: right;
  font-size: 1.8rem;
  padding-right: .4rem;
  color:#999;
}
.down{
	height: 45px;
	line-height: 45px;
	font-size: 14px;
	color: #999;
}
.downLeft{
  width:64%;
	float: left;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.down>span{
    font-size: 14px;
    color: #ccc;
    display: inline-block;
    text-align: right;
    margin-right: 0%;
}
.dandan{
  display: none;
}
.right{
  position: relative;
}
.right_abso{
      position: absolute;
    top: 0;
    right: 2%;
}
.right_abso img{
  width: 60%;
}
</style>
